<template>
	<view class="module_video_list">
		<view class="module_video" v-for="(_video, current) in videoList" :key="current">
			<!-- @error="videoErrorCallback" -->
			<video class="myVideo" :src="_video" controls :style="[module_style]"></video>
		</view>
	</view>
</template>

<script>
import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	name: 'myVideoList',
	props: {
		urls: {
			type: [Array, String],
			default() {
				return '';
			},
		},
		urls_split: {
			type: [String],
			default: ',',
		},
		width: {
			type: [Number, String],
			default: '750',
		},
		height: {
			type: [Number, String],
			default: '',
		},
		number: {
			type: [Number, String],
			default: 3,
		},
		radius: {
			type: [Number, String],
			default: '0',
		},
		margin: {
			type: [Number, String],
			default: '10',
		},
	},

	data() {
		return {
			videoList: [],
			list_width: 0,
		};
	},
	created() {},
	mounted() {},
	computed: {
		module_style() {
			let style = {};
			if (this.width > 0) {
				style['width'] = `${this.width}rpx`;
			}
			if (this.height > 0) {
				style['height'] = `${this.height}rpx`;
			} else {
				style['height'] = `${this.width}rpx`;
			}
			return style;
		},
	},
	methods: {
		// ...common,
		initVideoList() {
			let _this = this;
			if (_this.objJudge(_this.urls)) {
				_this.videoList = _this.urls.split(_this.urls_split);
			} else {
				_this.videoList = [];
				return;
			}
		},
	},
	watch: {
		urls: {
			handler(newVal) {
				this.initVideoList();
			},
			immediate: true,
		},
	},
};
</script>

<style lang="scss">
.module_video_list {
	position: relative;
	display: flex;
	flex-wrap: wrap;
}
</style>
